<template>
    <div>
        <div>
            <el-form :inline="true" :model="PIOForm" class="demo-form-inline">
                <el-form-item label="订单编码" prop="orderNumber">
                    <el-input v-model="PIOForm.orderNumber" placeholder="请输入内容" size="small"></el-input>
                </el-form-item>
                <el-form-item label="采购订单编码" prop="customerName">
                    <el-input v-model="PIOForm.poNum" placeholder="请输入内容" size="small"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" prop="productName">
                    <el-input v-model="PIOForm.productName" placeholder="请输入内容" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="small">搜索</el-button>
                    <el-button @click="resetSearchForm()" size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button type="danger" @click="batchDelete" size="small">批量删除</el-button>
            <el-button type="primary" @click="DialogOpen('添加订单')" size="small">新增</el-button>
        </div>
        <el-table v-loading="loading" :data="tableList" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="orderNumber" label="检测订单编码">
            </el-table-column>
            <el-table-column prop="poNum" label="采购订单编码">
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.orderStatus == 0" type="danger">未完成</el-tag>
                    <el-tag v-if="scope.row.orderStatus == 1" type="success">已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="qualificationStatus" label="是否合格">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.qualificationStatus == 0" type="danger">未检测</el-tag>
                    <el-tag v-if="scope.row.qualificationStatus == 1">合格</el-tag>
                    <el-tag v-if="scope.row.qualificationStatus == 2">不合格</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="productCode" label="产品编码">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="productUnit" label="产品单位">
            </el-table-column>
            <el-table-column prop="quantity" label="检测数量">
            </el-table-column>
            <el-table-column prop="operationTime" label="检测时间">
            </el-table-column>
            <el-table-column prop="empName" label="经办人">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="DialogOpen2('修改订单', scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
        </el-pagination>

        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="订单编码">
                    <el-input v-model="form.orderNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="采购订单编码">
                    <el-input v-model="form.poNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="form.orderStatus" placeholder="请选择">
                        <el-option label="未完成" :value="0"></el-option>
                        <el-option label="已完成" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否合格">
                    <el-select v-model="form.qualificationStatus" placeholder="请选择">
                        <el-option label="未检测" :value="0"></el-option>
                        <el-option label="合格" :value="1"></el-option>
                        <el-option label="不合格" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品编码">
                    <el-input v-model="form.productCode" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-select v-model="form.productName" placeholder="请选择" @change="handleProductChange">
                        <el-option v-for="product in productList" :key="product.id" :label="product.name"
                            :value="product.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品单位">
                    <el-input v-model="form.productUnit" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="检测数量">
                    <el-input v-model="form.quantity" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="检测时间">
                    <el-input v-model="form.operationTime" autocomplete="off" type="date"></el-input>
                </el-form-item>
                <el-form-item label="经办人">
                    <el-select v-model="form.empId" placeholder="请选择">
                        <el-option v-for="emp in empList" :key="emp.id" :label="emp.name" :value="emp.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitType()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getAllList, delById, batchDel, addOrder, updateOrder } from '@/api/pio'
import { getProductList } from '@/api/product'
import { getList } from '@/api/emp'
export default {
    name: '',
    data() {
        return {
            loading: false,
            currentPage: 1,
            pageNum: 1,
            pageSize: 5,
            totalPage: 0,
            tableList: [],
            PIOForm: {
                orderNumber: '',
                poNum: '',
                productName: ''
            },
            ids: [],
            dialogFormVisible: false,
            form: {
                orderNumber: '',
                poNum: '',
                orderStatus: '',
                qualificationStatus: '',
                productCode: '',
                productName: '',
                productUnit: '',
                quantity: '',
                operationTime: '',
                empId: 0
            },
            dialogTitle: '添加订单',
            productList: [],
            empList: []
        }

    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchDate()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.fetchDate()
        },
        handleSelectionChange(val) {
            this.ids = []
            for (var i = 0; i < val.length; i++) {
                this.ids.push(val[i].id)
            }
        },
        fetchDate() {
            this.loading = true
            getAllList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                orderNumber: this.PIOForm.orderNumber,
                poNum: this.PIOForm.poNum,
                productName: this.PIOForm.productName
            }).then(res => {
                if (res.code == 200) {
                    this.tableList = res.data.list
                    this.totalPage = res.data.total
                    this.loading = false
                }
            })
        },
        search() {
            this.pageNum = 1
            this.fetchDate()
        },
        resetSearchForm() {
            this.PIOForm = {}
            this.search()
        },
        DialogOpen(dialogTitle) {
            this.form = {}
            this.dialogTitle = dialogTitle
            this.dialogFormVisible = true
            getProductList().then(res => {
                if (res.code == 200) {
                    this.productList = res.data
                }
            })
            getList().then(res => {
                if (res.code == 200) {
                    this.empList = res.data
                }
            })
        },

        DialogOpen2(dialogTitle, row) {
            if (row.orderStatus == 1) {
                this.$message.error('此订单已完成，不可再修改！')
            } else {
                this.dialogTitle = dialogTitle
                this.dialogFormVisible = true
                this.form = row
                getProductList().then(res => {
                    if (res.code == 200) {
                        this.productList = res.data
                    }
                })
                getList().then(res => {
                    if (res.code == 200) {
                        this.empList = res.data
                    }
                })
            }
        },
        submitType() {
            if(this.dialogTitle == '添加订单'){
                addOrder(this.form).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.dialogFormVisible = false
                        this.fetchDate()
                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        })
                    }
                })
            }else{
                const flag=this.form.qualificationStatus == 1 ? '合格' : '不合格'
                this.$confirm('确认该产品' + flag +'?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateOrder(this.form).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            })
                            this.dialogFormVisible = false
                            this.fetchDate()
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
            
        },
        del(id) {
            delById({ id: id }).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.fetchDate()
                }
            })

        },
        batchDelete() {
            batchDel(this.ids).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.fetchDate()
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },
        handleProductChange(productId) {
            if (!productId) return

            const product = this.productList.find(p => p.id === productId)
            if (product) {
                this.form.productCode = product.pcode
                this.form.productUnit = product.unit
            }
        }


    },
    created() {
        this.fetchDate()
    },
}
</script>
<style scoped></style>